/* JavaScript Document
for group ware Version 2.0

by Wachirapan@

sample data
{
    "data": [
	{ "id" : "b1", "caption" : "Menu1", "link" : null, "icon" : null, "Admin": true, "child" : [
		{ "id" : "b11", "caption" : "Menu1.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b12", "caption" : "Menu1.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b13", "caption" : "Menu1.3", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b14", "caption" : "Menu1.4", "link" : null, "icon" : null, "child" : null }
	]
	},
	{ "id" : "b2", "caption" : "Menu2", "link" : null, "icon" : null, "child" : [
		{ "id" : "b21", "caption" : "Menu2.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b22", "caption" : "Menu2.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b23", "caption" : "Menu2.3", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b24", "caption" : "Menu2.4", "link" : null, "icon" : null, "child" : null }
	]
   	 },
	{ "id" : "b3", "caption" : "Menu3", "link" : null, "icon" : null, "child" : [
		{ "id" : "b31", "caption" : "Menu3.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b32", "caption" : "Menu3.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b33", "caption" : "Menu3.3", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b34", "caption" : "Menu3.4", "link" : null, "icon" : null, "child" : null }
	]
	},
	{ "id" : "b4", "caption" : "Menu4", "link" : null, "icon" : null, "child" : [
		{ "id" : "b41", "caption" : "Menu4.1", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b42", "caption" : "Menu4.2", "link" : null, "icon" : null, "child" : null },
		{ "id" : "b43", "caption" : "Menu4.3", "link" : null, "icon" : null, "child" : null}
	]
    	},
	{ "id" : "b5", "caption" : "Menu5", "link" : null, "icon" : null, "child" : null}
    ]
}

CSS files =  ui.topMenu.css

*/

(function ($) {

    ///Menu Builder
    jQuery.fn.topMenu = function (settings) {
        var defaults = {
            dataURL: "",            // URL ที่จะไปเรียก เพื่อนำข้อมูลที่เป็น Json มาใช้
            menuActive: "-1",         // menuActive คือ ตำแหน่งของหัวข้อปัจจุบัน
            submenuWidth: 100,
            menuAlign: 'right',
            target: '#mainContent'
        }
        var options = jQuery.extend(defaults, settings);

        var fixLayOut;
        $("body").data("elementOfTopMenu", $(this));
        var holder = $(this);
        //add menu navigate
        //$(this).after('<div class="navigation"></div>');
        //div Loading..
        var loadState = '<div class="ui-corner-bottom" style="height:400px; background-color:#ffffff; padding:4px; border:solid 1px #ccc"><div style="margin: auto;margin-top:150px; width:250px; height:50px"><img src="Content/Images/loading.gif" alt="loading" align="absmiddle"/>Opening page please wait..</div></div>';

        LoadDataOfMenu("DrawMenu");
        //โหลด ข้อมูลจาก Server และส่งต่อให้ function วาด
        function LoadDataOfMenu(callBackDrawMenu) {
            $.getJSON(options.dataURL, function (data) {
                //data = jQuery.parseJSON(data.data);
                if (data !== null) {
                    eval(callBackDrawMenu)(data);
                }
            });
        }
        function DrawMenu(data) {
            //clear ค่าใน Element ของ menu
            holder.html("");
            var menuObj = data;
            var indexActive = 0;
            //loop menu
            $(menuObj).each(function (i) {
                //alert(menuObj[i].toSource());
                //วาด menu หลัก
                //alert(menuObj[i].isVisible);
                if (menuObj[i].isVisible === 'true') {
                    holder.append('<span index="' + i + '" id="' + menuObj[i].id.toString()
                              + '" class="topMenu ui-corner-top" style="display:inline-block" menuname="' + menuObj[i].caption.toString() + '" menuActive="'+menuObj[i].menuActive.toString().toLowerCase() +'" ><div class="Caption">' + menuObj[i].caption.toString() + '</div></span>');
                    //เพิ่มความกว้างให้กับเมนูหลัก
                    var withData = holder.find("#" + menuObj[i].id.toString()).find("div.Caption").width();
                    withData = withData + 40;
                    holder.find("#" + menuObj[i].id.toString()).find("div.Caption").width(withData);
                    AssignEventHeadMenu(holder, menuObj[i]);
                    DrawMenuList(menuObj[i]);
                }
            });
            //กำหนดหน้าแรกให้กับเมนู
            if (options.menuActive !== undefined && options.menuActive !== '-1') {
                $(holder).find("span.topMenu").each(function () {
                    if ($(this).attr("index") === options.menuActive) {
                        $(this).addClass("topMenuActive");
                        //$(this).trigger('click');
                    }
                });
                options.menuActive === "-1"
                //กำหนดหน้าแรกให้กับเมนู จาก  json data
            } else {
                $(holder).find("span.topMenu").each(function () {
                    if ($(this).attr("menuActive").toLowerCase() === "true") {
                        $(this).trigger('click');
                        return false;
                    }
                });
            }
        }
        function AssignEventHeadMenu(holder, menuObj) {
            //$("span.topMenu:last").disableSelection();
            //เมื่อ เมาส์ วางที่หัวเมนู
            holder.find("span.topMenu:last").hover(
                function (e) {
                    e.stopPropagation();
                    e.cancelBubble = true;
                    ClearMenu();
                    //$(this).addClass("topMenuShow"); //แท็บ top menu
                    $(this).find(".subMenu").show('slide', { direction: 'up' }, 300, function () { });
                },
                function (e) {
                    holder.find(".subMenu").hide();
                }
            );
            //เมื่อคลิกที่ หัวเมนู
            AssignEventHeadMenuLink(menuObj);
        }
        function AssignEventHeadMenuLink(menuObj) {
            if (menuObj.link !== null && menuObj.link !== "") { // have link
                ClearMenu();
                var elementHolder = $("body").data("elementOfTopMenu");
                $(elementHolder).find("#" + menuObj.id.toString()).css('cursor', 'pointer');
                $(elementHolder).find("#" + menuObj.id.toString()).click(function () {
                    var sizeString = menuObj.link.indexOf("[redirect]");
                    //if (String(menuObj.link).substring(0, 10) != "[redirect]") {
                    if (sizeString === -1) {
                        //elementHolder.find('li').removeClass("everClickMenu");
                        //alert(menuObj.link.toString());
                        $(elementHolder).find('li').removeClass("everClickMenu");
                        $(elementHolder).find("span").removeClass("everClickMenu");
                        $(this).addClass("everClickMenu");
                        $("div.navigation").html("");
                        //โหลดตามเมนูที่คลิก
                        $(options.target).html(loadState).load(menuObj.link.toString());
                    } else {
                        window.location = menuObj.link.replace("[redirect]", "");
                    };
                });
            } else { //not have link
                //$("#" + menuObj.id.toString()).append(menuObj.caption.toString());
            }
        }
        //วาดรายการเมนู
        function DrawMenuList(menuObj) {
            if (menuObj.child !== null && menuObj.child !== "") {
                var elementHolder = $("body").data("elementOfTopMenu");
                // create sub of child menu
                $(elementHolder).find('span#' + menuObj.id.toString()).append('<div id="subMenu' + menuObj.id.toString() + '" class="subMenu"><ul class="ui-widget"></ul></div>');
                //รายการย่อยมีความกว้างน้อยกว่าเมนูหลัก ให้ใช้ความกว้างของเมนูหลัก
                var widthTopMenu = $(elementHolder).find('span#' + menuObj.id.toString()).width();
                //ใส่ความกว้างของเมนูย่อยเท่ากับ topMenu ก่อน
                //$(elementHolder).find('span#' + menuObj.id.toString()).find("div#subMenu" + menuObj.id.toString()).css("width", widthTopMenu);
                $(menuObj.child).each(function (d) {
                    $("body").append("<span class=tempLength style='display:none'>" + menuObj.child[d].caption.toString() + "</span>");
                    var widthListMenu = $("span.tempLength").width();
                    $("span.tempLength").remove();
                    //รายการย่อยมีความกว้างมากกว่าเมนูหลัก ให้ใช้ความกว้าง เป็น auto
                    if (widthListMenu >= widthTopMenu) {
                        $(elementHolder).find('span#' + menuObj.id.toString()).find("div#subMenu" + menuObj.id.toString()).css("width", "auto");
                    }
                    //create sub of child menu
                    $(elementHolder).find('span#' + menuObj.id.toString() + ' ul:first').append('<li id="' + menuObj.child[d].id + '"><a href="#" class="Caption">' + menuObj.child[d].caption.toString() + '</a></li>');
                    AssignEventMenuListLink(menuObj.child[d]);
                    if (menuObj.child[d].child !== null && menuObj.child[d].child !== "") {
                        //แสดงลูกศรบอกว่ามี sub
                        //$(elementHolder).find('span#' + menuObj.id.toString() + ' ul:first').
                        DrawSubMenu(menuObj.child[d]);
                    }
                });
            }
        }
        //assign event ให้กับรายการเมนู
        function AssignEventMenuListLink(menuObj) {
            if (menuObj.link !== null && menuObj.link !== "") { // have link
                ClearMenu();
                var elementHolder = $("body").data("elementOfTopMenu");
                $(elementHolder).find("#" + menuObj.id.toString()).click(function () {
                    if (String(menuObj.link).substring(0, 10) !== "javascript") {
                        elementHolder.find('li').removeClass("everClickMenu");
                        $(elementHolder).find("span").removeClass("everClickMenu");
                        //alert(menuObj.link.toString());
                        //เขียน Navigator
                        $("div.navigation").html(menuObj.caption.toString()).click(function () {
                            $(options.target).html(loadState).load(menuObj.link.toString());
                        });
                        $(elementHolder).find('li#' + menuObj.id.toString()).addClass("everClickMenu");
                        $(options.target).html(loadState).load(menuObj.link.toString());
                    } else {
                        window.location = menuObj.link.toString();
                    };
                });
            } else { //not have link
                $("#" + menuObj.id.toString()).append(menuObj.caption.toString());
            }
        }

        function ClearMenu() {
            var elementHolder = $("body").data("elementOfTopMenu");
            //$(".topMenu").removeClass("topMenuShow");
        }

    };
    //end ///Menu Builder

})(jQuery);